
<!--
 * @Descripttion: 合同阶段分组
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-10-21 14:24:00
 * @LastEditors: GW
 * @LastEditTime: 2021-10-22 09:14:47
-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col v-if="permissions.includes('contractPhase:add')" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="newProcess">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                        <a-col v-if="permissions.includes('bom:edit')" :class="editMask&&voucherState != 1?'':'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="editMask&&voucherState != 1?editClick():''">
                                <a-icon class="btns-icon" type="edit" />
                                <div class="btns-text">修改</div>
                            </div>
                        </a-col>
                        <a-col v-if="permissions.includes('bom:delete')" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="removeData">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                        <a-col v-if="permissions.includes('bom:save')" :class="editMask?'btns-disable':''" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="editMask?'':submit()">
                                <a-icon class="btns-icon" type="save" />
                                <div class="btns-text">保存</div>
                            </div>
                        </a-col>
                        <!-- <a-col v-if="permissions.includes('bom:examine')" :class="orderId && editMask &&voucherState == 0?'':'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="orderId && editMask && voucherState == 0?auditClick(1):''">
                                <a-icon class="btns-icon" type="audit" />
                                <div class="btns-text">审核</div>
                            </div>
                        </a-col>
                        <a-col v-if="permissions.includes('bom:examine')" :class="orderId && editMask &&voucherState == 1?'':'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="orderId && editMask && voucherState == 1?auditClick(0):''">
                                <a-icon class="btns-icon" type="audit" />
                                <div class="btns-text">弃审</div>
                            </div>
                        </a-col>
                        <a-col :class="editMask?'':'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="editMask?copy():''">
                                <a-icon class="btns-icon" type="copy" />
                                <div class="btns-text">复制</div>
                            </div>
                        </a-col>
                        <a-col :class="!editMask?'':'btns-disable'" :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="()=>{editMask = true}">
                                <a-icon class="btns-icon" type="undo" />
                                <div class="btns-text">撤销</div>
                            </div>
                        </a-col> -->
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="getList">
                                <a-icon class="btns-icon" type="sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
            <div ref="print" class="credentials-bom-wrapper" id="documents-wrapper">
                <h3 class="text-center">
                    <span class="text-name">合同阶段组</span><br>
                </h3>
                <a-row style="border:1px solid #ddd;">
                    <a-col :span="4">
                        <section class="tabbl-bom">

                        </section>

                        <div class="bom-tree-wrapper">
                            <div class="tree-box not-copy" style="height:99%">
                                <a-input-search style="margin-bottom: 8px" placeholder="搜索标题" @change="onTreeSearchChange" />
                                <a-tree show-line default-expand-all :treeData="typsTreeData" v-if="typsTreeData.length>0 && isShowTree" :selectedKeys="defaultSelectedKeys" @select="onSelect" :replaceFields="replaceFields">
                                    <a-icon slot="switcherIcon" type="down" />
                                </a-tree>
                            </div>
                        </div>
                    </a-col>
                    <a-col :span="20" style="min-height:366px;padding:10px;">

                        <section>
                            <div><span class="audit-status" style="z-index:78" v-show="voucherState==1">已审</span></div>
                            <a-form-model :layout="formLayout">
                                <div class="header-box" style="position:relative">
                                    <!-- 遮罩（点击修改关闭遮罩） -->
                                    <div class="edit-mask-route" v-show="editMask"></div>
                                    <a-row class="order-dynamic-form-wrapper">
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="阶段组编码" :rules="[{ required: true, message:'',trigger:'input'}]">
                                                <a-input v-model="dataJson.code"></a-input>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="阶段组名称" :rules="[{ required: true, message:'',trigger:'input'}]">
                                                <a-input v-model="dataJson.name"></a-input>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="阶段组说明">
                                                <a-input v-model="dataJson.remarks"></a-input>
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="默认阶段组">
                                                <a-checkbox v-model="dataJson.isDefault"></a-checkbox>
                                            </a-form-model-item>
                                        </a-col>
                                    </a-row>
                                </div>
                                <div class="table-box">
                                    <!--修改状态的表格-->
                                    <a-table id="editBom_tb" v-if="!editMask" class="atable-edit" :columns="columns" :customRow="customClick" :data-source="dataSource" :pagination="false" bordered :scroll="{x:1000,y:300}">
                                        <template v-for="item in editColumnArraya" :slot="item" slot-scope="text, record ,index">
                                            <div :key="item">
                                                <editable-cell v-if="isRouterAlive" :record="record" :checkType="checkType" :col="item" :text="text" :unitsAssistSelect="unitsAssistSelect" :unitsDataDetails="unitsDataDetails" @change="onCellChange(index, item, $event)" @choiceAddData="choiceAddData(index,col,$event)" />
                                            </div>
                                        </template>
                                    </a-table>
                                    <!--查看状态的表格-->
                                    <a-table id="lookBom_tb" class="look-table" v-if="editMask" indentSize="18" :columns="columns" :data-source="innerData" :pagination="false" bordered :scroll="{x:1000,y:300}" @expand="expandChange">

                                    </a-table>
                                </div>
                                <!-- <div class="footer-box">
                                    <a-row class="order-dynamic-form-wrapper">
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="修改人">
                                                <a-input v-model="dataJson.updateUserName" :disabled="true" />
                                            </a-form-model-item>
                                        </a-col>
                                        <a-col :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                                            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="修改时间">
                                                <a-input v-model="dataJson.updateDate" :disabled="true" />
                                            </a-form-model-item>
                                        </a-col>
                                    </a-row>
                                </div> -->
                            </a-form-model>
                        </section>
                    </a-col>
                </a-row>

            </div>
            <div class="contextmenu-box">
                <!-- 右键菜单 -->
                <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
                    <li @click="handleAdd()">新增行</li>
                    <li @click="handleDelete()">删除行</li>
                    <!--  <li @click="handleCopy()">复制行</li> -->

                </ul>
            </div>
        </div>

        <!--加载中-->
        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
        <!--用做横向打印-->
        <div v-html="stylePrint"></div>
    </div>
</template>
<script>

import { mapState } from "vuex";
import { pageList } from "@/api/inventory/unit";//计量单位
import editableCell from "@/views/production/workshop/editTable/EditableCell"
// import { save, list, remove, details, examine, groupList } from "@/api/production/bom";
import { save, list, remove, details } from "@/api/contract/contractClassGroup";

import searchArchives from '@/components/OrderDynamicForm/searchArchives';
import { Controlwidth } from "@/utils/antTableComponents";
import { classPageListToTree, searchInTreeData } from "@/utils/tree";

import searchGroupDetail from "@/components/PopUpLayer/searchGroupDetail";  //静态表格明细搜索组
import searchGroupHeader from "@/components/PopUpLayer/searchGroupHeader";

export default {
    components: {
        editableCell,
        searchArchives,
        searchGroupDetail,
        searchGroupHeader,
    },
    data () {
        return {
            //----------↓样式----------
            fromStyle: { paddingTop: "8px" },
            labelCol: { span: 10 },
            wrapperCol: { span: 14 },
            editFalse: {
                borderBottom: '1px solid #ded7d7'
            },
            grid: {
                xs: 24,
                sm: 24,
                md: 12,
                lg: 8,
                xl: 8,
                xxl: 6
            },
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------
            setTime: null,  //延迟请求
            checkType: 'is_material,is_invented_key',//生产耗用，虚拟件
            checkHeadType: 'is_made_self,is_made_request,is_invented_key',//自制，委外，虚拟件
            replaceFields: {
                // tree 别名
                title: "name",
                key: "key",
            },
            editMask: false,
            dataSource: [],
            innerData: [],
            isRouterAlive: true,
            dragStartObj: null,     //拖动的目标
            dragEndObj: null,       //目标位置
            dragStartIndex: null,
            dragEndIndex: null,
            customClick: (record, index) => {
                return {
                    on: {
                        contextmenu: (e) => {//右键事件
                            e.preventDefault();
                            if (index <= this.dataSource.length) {
                                this.openMenu(e);
                                console.log('右键点击的', index);
                                this.thisClickId = index;
                                // this.thisClickRecord = record;
                            }
                        },
                        click: (e) => {
                            e.preventDefault();
                            if (record.unitGroupId) {
                                this.unitsAssistSelect = [];
                                this.unitsDataDetails.forEach((element, index) => {
                                    if (element.unitGroupId == record.unitGroupId && !element.isMainUnit) {//&& !element.isMainUnit
                                        this.unitsAssistSelect.push(element);
                                    }
                                });
                            } else {
                                this.unitsAssistSelect = [];
                            }
                        }
                    }
                }
            },
            listData: [],
            mouseIndex: null,
            orderId: null,
            nowRecord: {},
            voucherState: 0,
            columns: [
                {
                    title: '序号',
                    width: 40,
                    align: 'center',
                    customRender: (text, row, index) => {
                        return <span>{index + 1}</span>;
                    }
                },
                {
                    title: <div><span style="color:red;font-family: SimSun,sans-serif;font-size:14px">*</span> 阶段编码</div>,
                    dataIndex: 'code',
                    width: 120,
                    scopedSlots: { customRender: 'code' },
                    ellipsis: true,
                }, {
                    title: <div><span style="color:red;font-family: SimSun,sans-serif;font-size:14px">*</span> 阶段名称</div>,
                    dataIndex: 'name',
                    width: 120,
                    scopedSlots: { customRender: 'name' },
                    ellipsis: true,
                },
                {
                    title: '是否质保金阶段',
                    dataIndex: 'isRetentionMoney',
                    width: 100,
                    customRender: (text, row, index) => {
                        return text == 1 ? '是' : text == 0 ? '否' : '';
                    }
                }, {
                    title: '阶段说明',
                    dataIndex: 'content',
                    width: 100,
                    ellipsis: true,
                }, {
                    title: '备注',
                    dataIndex: 'remarks',
                    width: 140,
                    ellipsis: true,
                }],
            visible: false,
            top: 0,
            left: 0,
            editColumnArraya: [],
            dataSourceNumber: 9,//默认渲染多少行表格数据
            dataJson: {
                code: null,//合同阶段组编码
                name: null,//合同阶段组名称
                remarks: null,//备注
                isDefault: 0,//是否默认
                contractStageList: [],//子bom明细
            },
            defaultSelectedKeys: [],//初始加载默认选中的bom

            //物料
            maskArchives: false,
            inventoryDomTop: null,
            inventoryDomRight: null,
            inputVal: null,
            selectedRowKeys: [],
            selectedData: [],
            childrenData: [],//子级数据
            recordId: null,//当前点击展开的id
            styleProcess: "{}",
            styleOffice: "{}",
            position: {},

            searchInventoryCode: null,//母件编码搜索
            unitsDataDetails: [],//多计量组
            unitsAssistSelect: [],

            treeData: [],//分组树形
            typsTreeData: [],
            isShowTree: true,
        };
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    created () {
        this.tableInit();//初始化表格
        this.editColumnArray(this.columns);
        this.getList();//获取列表
        // this.getBomGroupList();
    },
    updated () {
        Controlwidth("route_tb", 50);
        Controlwidth("editBom_tb", 80);
        Controlwidth("lookBom_tb", 80);
    },
    watch: {
        visible (value) {
            if (value) {
                document.body.addEventListener("click", this.closeMenu);
            } else {
                document.body.removeEventListener("click", this.closeMenu);
            }
        },
    },
    methods: {
        tableInit () {
            for (let i = 0; i < this.dataSourceNumber; i++) {
                this.dataSource.push({})
            }
            this.reload();
            console.log(this.dataSource)
        },
        getBomGroupList () {
            //获取物料清单分组
            this.treeData = [];
            list().then(res => {
                if (res.code == 200) {
                    console.log("BOM_Tree数据01:", res.data);


                    console.log("BOM_Tree数据02:", this.treeData);

                    this.treeFormate();
                } else {
                    // this.$message.warning(res.message);
                }
            })
        },
        treeFormate () {
            const childrenNav = [];
            classPageListToTree(this.treeData, childrenNav, 0);
            //添加showTitle处理后的data
            this.typsTreeData = [
                {
                    title: "合同阶段组名称",
                    name: "合同阶段组名称",
                    key: "",
                    children: this.getTreeData(childrenNav)
                }
            ];
        },
        //递归添加显示的tree title
        getTreeData (data) {
            for (let i = 0; i < data.length; i++) {
                let element = data[i];
                this.$set(element, "name", `${element.name}`);
                if (element.children) {
                    this.getTreeData(element.children);
                }
            }
            return data;
        },
        reload () {
            //强制刷新表格
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            });
        },
        reloadTree () {
            console.log("进入reloadTree");
            this.isShowTree = false;
            this.$nextTick(function () {
                this.isShowTree = true;
            });
        },
        //计量单位组下面的组单位
        getGrouplist () {
            let requestData = {
                current: 1,
                size: 1000,
                unitGroupId: -1
            }
            pageList(requestData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records } = data;
                    this.unitsDataDetails = records;
                }
            }).catch(error => { });
        },
        newProcess () {
            //新增（初始化数据）
            this.dataSource = [];
            this.mouseIndex = null;
            this.editMask = false;
            this.tableInit();
            this.dataJson = {
                bomType: 1,
                finishProductRate: 100,//成品率
            };
            this.orderId = null;
            this.voucherState = 0;
            this.defaultSelectedKeys = [];
        },
        openMenu (e) {
            //显示右键菜单
            var x = e.pageX - 250;
            var y = e.pageY - 40;
            this.top = y;
            this.left = x;
            this.visible = true;
        },
        closeMenu () {
            //隐藏右键菜单
            this.visible = false;
        },
        handleAdd () {
            //新增数据
            const { count, dataSource } = this;
            const newData = {};
            this.$nextTick(() => {
                this.dataSource.splice(this.dataSource.length, 0, newData);
            })
            console.log('新增行：', this.dataSource)
        },
        handleDelete () {
            //删除整行
            let _this = this;
            let numberId = this.thisClickId;
            console.log(numberId);
            this.$confirm({
                title: "确认",
                content: (
                    <span>
                        您确定要{<span style="color:red;">删除</span>}该记录吗？
                    </span>
                ),
                onOk () {
                    let dataSource = [..._this.dataSource];
                    console.log(_this.dataSource.length);
                    if (dataSource.length - 1 > _this.dataSourceNumber) {
                        //大于规定行数(删除)
                        _this.dataSource = dataSource.filter((item, index) => index !== numberId);
                    } else {
                        //小于规定行数(清空)
                        for (let i = 0; i < dataSource.length; i++) {
                            if (i === numberId) {
                                for (const key in dataSource[i]) {
                                    if (key != 'number') {
                                        dataSource[i][key] = ""
                                    }
                                }
                            }
                        }
                        _this.dataSource = dataSource;
                    }


                    _this.reload();
                },
                onCancel () { },
            });
        },
        //根据计量组id返回 非主计量的 辅助计量组
        returnGroupUnits (id) {
            let elementId = null;
            let units = [];
            this.unitsDataDetails.forEach(element => {
                if (id == element.id) {
                    elementId = element.unitGroupId;
                }
            });
            this.unitsDataDetails.forEach(element => {
                if (elementId == element.unitGroupId) {// && !element.isMainUnit
                    units.push(element);
                }
            });
            return units;
        },
        onChangeDate (v, s) {
            this.dataJson.versionDate = s;
        },
        onCellChange (indexTable, dataIndex, value) {
            const dataSource = [...this.dataSource];
            const target = dataSource.find((item, index) => index === indexTable);
            console.log(target, dataIndex, value, indexTable);

            this.$set(target, dataIndex, value)
            if (dataIndex == 'name' || dataIndex == 'code') {
                //工序编码
                if (value) {
                    target['name'] = value.name;
                    target['code'] = value.code;
                    target['isRetentionMoney'] = value.isRetentionMoney;
                    target['content'] = value.content;
                    target['remarks'] = value.remarks;
                } else {
                    target['name'] = null;
                    target['code'] = null;
                    target['isRetentionMoney'] = null;
                    target['content'] = null;
                    target['remarks'] = null;
                }

            }
            this.$nextTick(() => {
                this.dataSource = dataSource;
                console.log('明细数据：', this.dataSource)
                this.reload();
            })
        },

        //获取可编辑的列名
        editColumnArray (column) {
            let editcloumn = [];
            column.forEach((item, index) => {
                editcloumn.push(item.dataIndex);
            });
            this.editColumnArraya = editcloumn;
        },
        onSelect (keys, event) {
            this.selectedKeys = keys;
            this.defaultSelectedKeys = keys;
            // 点击树节点触发
            this.selectedRows = event.node.dataRef;

            console.log(this.selectedKeys, this.selectedRows);
            // this.mouseIndex = record.key;

            this.orderId = this.selectedRows.id;
            this.voucherState = this.selectedRows.voucherState;
            this.nowRecord = this.selectedRows;

            this.getDetails(this.selectedRows);
        },
        //列表
        getList (searchArray) {
            let postData = {
                "current": 1,
                "size": '-1'
            }
            if (searchArray) {
                if (Object.keys(searchArray).length > 0) {
                    postData = Object.assign(postData, searchArray);
                }
            }
            list(postData).then(response => {
                if (response.code === 200) {
                    const data = response.data;

                    this.treeData = data.map(r => {
                        return { ...r, key: r.id }
                    })
                    this.treeFormate();

                    if (data.length > 0) {
                        data.forEach(item => {
                            item.key = item.id;
                        });
                        this.defaultSelectedKeys = [data[0].key];//默认选中第一条数据
                    }

                    if (this.orderId) {
                        this.defaultSelectedKeys = [this.orderId];//保存过后默认选择这个一条
                    }
                    this.listData = data;
                    console.log('listData:', this.listData)

                    // this.typsTreeData[0].children.forEach(item => {
                    //     item.children = this.listData.filter((res) => { return item.id });
                    // });


                    console.log(this.orderId);


                    //如果没有orderId表示是第一次进入页面
                    if (!this.orderId) {
                        this.mouseIndex = data[0].key;
                        this.orderId = data[0].id;
                        this.voucherState = data[0].voucherState;
                        this.nowRecord = data[0];
                        this.getDetails(data[0]);
                    }

                    if (this.orderId) {
                        this.getDetails({ id: this.orderId });
                    }
                }
            }).catch(error => { });
        },
        //保存
        submit () {
            this.dataJson.contractStageList = this.dataSource.filter(item => { return item.code });

            if (this.dataJson.code == '' || this.dataJson.code == null) {
                this.$message.warning('阶段组编码必须填写')
                return;
            }
            if (this.dataJson.name == '' || this.dataJson.name == null) {
                this.$message.warning('阶段组名称必须填写')
                return;
            }

            if (JSON.stringify(this.dataJson.contractStageList) == '[]') {
                this.$message.warning('阶段列表不能为空')
                return;
            }
            this.dataJson.createDate = '';
            this.dataJson.updateDate = '';

            let requestData = this.dataJson;
            save(requestData).then(response => {
                if (response.code === 200) {
                    this.$message.success('保存成功');

                    // if (!this.orderId) {
                    //     let tableBody = document.getElementById('route_tb').getElementsByClassName('ant-table-body');
                    //     setTimeout(() => {
                    //         tableBody[0].scrollTop = tableBody[0].scrollHeight;
                    //     }, 200)
                    // }
                    this.orderId = response.data;
                    this.mouseIndex = response.data;
                    this.voucherState = 0;
                    this.getList();
                    // this.getBomGroupList();
                    this.getDetails({ id: response.data })

                } else {
                    this.$message.error(response.message);
                }
            }).catch((e) => {
                // this.isSaveRun = true;
            })
        },
        removeData () {
            //删除
            // if (this.selectedRowKeys.length != 1) {
            //     this.$message.warning('请选择一条数据');
            //     return;
            // }
            if (this.orderId == null || this.orderId == '') {
                this.$message.warning('请选择一条数据');
                return;
            }

            let _this = this;
            this.$confirm({
                title: `是否确认删除物料清单 "${_this.nowRecord.name}"`,
                content: "",
                onOk () {
                    remove({ id: _this.nowRecord.id }).then(response => {
                        if (response.code === 200) {
                            _this.$message.success('删除成功');
                            _this.selectedRowKeys = [];
                            _this.selectedData = [];
                            _this.newProcess();
                            _this.getList();//获取列表
                            document.getElementById('route_tb').getElementsByClassName('ant-table-body')[0].scrollTop = 0;
                        } else {
                            _this.$message.error(response.message);
                        }
                    }).catch((e) => {
                    })
                },
                onCancel () { }
            });
        },
        handlInputArchives (type, ref) {
            this.styleProcess = null;
            this.styleOffice = null;

            let w = document.body.clientWidth;//当前可视窗口宽度
            this.maskArchives = true;

            if (w < 1600) {
                this.inventoryDomTop = 240;
            } else {
                this.inventoryDomTop = 195;
            }
        },
        rowClassName (record, index) {
            return this.mouseIndex == record.key ? 'hoverRowStyl' : '';
        },
        onSelectChange (keys, data) {
            this.selectedRowKeys = keys;
            this.selectedData = data;
            console.log(keys, data)
        },
        getDetails (dd) {
            if (!dd.id) {
                return;
            }
            let record = JSON.parse(JSON.stringify(dd));
            this.editMask = true;
            let requestData = {
                id: record.id
            }
            details(requestData).then(response => {
                if (response.code === 200) {

                    //修改表格的处理
                    this.dataJson = response.data;

                    this.dataSource = JSON.parse(JSON.stringify(response.data.contractStageList));
                    this.innerData = this.dataSource;

                    if (this.dataSource.length < this.dataSourceNumber) {
                        for (let i = 0; i < this.dataSourceNumber - response.data.contractStageList.length; i++) {
                            this.dataSource.push({})
                        }
                    }

                    this.reload();
                } else {
                    this.$message.error(response.message);
                }
            }).catch((e) => { })
        },
        editClick () {
            this.editMask = false;
        },
        //审核
        auditClick (type) {
            let requestData = {
                id: this.orderId,
                status: type
            }
            examine(requestData).then((response) => {
                if (response.code === 200) {
                    if (type == 1) {
                        this.$message.success('审核成功');
                        this.getList();
                        this.voucherState = 1;
                    }
                    if (type == 0) {
                        this.$message.success('弃审成功');
                        this.getList();
                        this.voucherState = 0;
                    }
                } else {
                    // this.$message.warning(response.message);
                }
            })
        },
        expandChange (expanded, record) {
            if (record.children.length > 0) return false;
            //table展开
            details({ "bomId": record.bomId }).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    data.forEach(item => {
                        if (item.bomId) {
                            item.children = [];
                        }
                        item.key = item.id;
                    });

                    // this.childrenData = data;//子集数据
                    // this.recordId = record.bomId;//当前点击展开的bomId
                    record.children = data;
                    // this.nextArray(this.innerData);
                } else {
                    this.$message.error(response.message);
                }
            }).catch((e) => { })
        },
        nextArray (array) {
            for (const i in array) {
                let data = array[i];
                if (data.children) {
                    if (data.bomId == this.recordId) {
                        data.children = this.childrenData;
                    }
                    this.nextArray(data.children);
                }
            }
        },
        searchGroup (type) {
            //搜索组件的显示
            if (type == 1) {
                this.$nextTick(() => {
                    this.$refs.processSearch.showModal();
                    this.styleProcess = { "position": "relative", "z-index": 75 };
                    this.styleOffice = { "position": "relative", "z-index": 50 };
                })
            } else {
                //延迟请求
                this.$refs.processSearch.inputSearch();
            }
        },
        handleSearch (key, confirm, col) {
            //table搜索
            confirm();
            console.log(key, confirm, col)
            this.searchInventoryCode = key[0];

            let searchText = { 'searchKey': this.searchInventoryCode }
            this.getList(searchText)
        },
        handleReset (clearFilters) {
            clearFilters();
            this.searchInventoryCode = '';
            this.getList()
        },
        copy () {
            //复制
            this.editMask = false;
            this.orderId = null;
            this.mouseIndex = null;
            this.dataJson.id = null;
            this.dataJson.voucherState = 0;
            this.dataSource.forEach(item => {
                item.id = null;
            });
            this.voucherState = 0;
            this.$message.success('复制成功，请修改后保存数据！');
        },
        onTreeSearchChange (e) {
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                const value = e.target.value;
                console.log(value);
                this.listData.forEach(item => {
                    if (item.name.indexOf(value) > -1) {
                        item.class = '';
                    } else {
                        item.class = 'hideBomNode';
                    }
                });

                this.typsTreeData[0].children = this.listData;
                console.log('this.typsTreeData:', this.typsTreeData)
                this.reloadTree();
            }, 400)

        },
    }
};
</script>
<style lang="less">
    @import '~@/style/purchase/voucher.less';
    .credentials-bom-wrapper {
        padding: 12px 10px 0;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        .ant-form-item {
            margin: 0;
        }
        .mask-archives {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            // background: rgba(220, 53, 69, 0.5);
            background: rgba(0, 0, 0, 0);
            z-index: 2;
        }
        .ant-table-tbody > tr > td {
            cursor: pointer;
        }
        .hoverRowStyl {
            background-color: rgba(24, 144, 255, 0.2);
            td {
                color: #222;
            }
        }
        .ant-table colgroup > col.ant-table-selection-col {
            width: 30px;
        }
        .edit-mask-route {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 800;
            background: rgba(255, 255, 255, 0.1);
        }
        .inner-table {
            margin: 0 !important;
        }

        .look-table {
            .ant-table-body {
                min-height: 300px;
            }
        }

        .order-dynamic-form-wrapper {
            label:not(.form-check-label):not(.custom-file-label) {
                font-weight: normal;
            }
            .ant-form-item-label,
            .ant-form-item-control {
                line-height: 32px;
            }
        }

        .atable-edit {
            .ant-table-tbody > tr > td {
                padding: 0px !important;
            }
        }

        .drag-line-top td {
            border-top: 1px dashed #1890ff;
        }

        .drag-line-bottom td {
            border-bottom: 1px dashed #1890ff !important;
        }
        .position-zindex-1 {
            position: relative;
            z-index: 71;
        }

        .ant-select-selection--single {
            height: 28px;
        }
        .ant-tree-title {
            max-width: 500px !important;
        }
    }
    .tabbl-bom {
        .ant-table-scroll {
            height: 450px !important;
        }
        .ant-table-wrapper .ant-table-pagination {
            text-align: right !important;
        }
    }
    .bom-tree-wrapper {
        height: 560px;
        border-right: 1px solid #ccc;
        .tree-box {
            overflow-y: auto;
        }
    }
    #editBom_tb,
    #lookBom_tb {
        margin: 8px 0;
    }
    .hideBomNode {
        display: none;
    }
</style>